<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <script>
            //<![CDATA[
            function handleForm(xhr, status, args) {
                if (args.validationFailed)
                    PF('spot').show();
                else
                    PF('spot').hide();
            }

            //]]>
        </script>

    </ui:define>


    <ui:define name="title">
        Spotlight
    </ui:define>

    <ui:define name="description">
        Spotlight highlights a certain component on page. In this particular example, panel is highlighted on validation error.
    </ui:define>

    <ui:param name="documentationLink" value="/components/spotlight"/>
    <ui:param name="widgetLink" value="Spotlight"/>

    <ui:define name="implementation">
        <div class="card">
            <h:form>
                <p:growl id="growl"/>

                <p:panel id="pnl" header="New User">
                    <p:messages id="messages"/>
                    <h:panelGrid columns="3" id="grid" cellpadding="7">
                        <p:outputLabel for="username" value="Username"/>
                        <p:inputText id="username" value="#{spotlightView.username}" required="true">
                            <f:validateLength minimum="2"/>
                        </p:inputText>
                        <p:message for="username"/>

                        <p:outputLabel for="email" value="Surname:"/>
                        <p:inputText id="email" value="#{spotlightView.email}" required="true"/>
                        <p:message for="email"/>
                    </h:panelGrid>

                    <p:commandButton value="Save" icon="pi pi-check" action="#{spotlightView.save}" update="growl grid"
                                     oncomplete="handleForm(xhr, status, args)" styleClass="mt-3"/>
                </p:panel>

                <p:spotlight target="pnl" widgetVar="spot"/>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
